<template>
    <div class="bcf pos-r">
        <div class="">
            <div style="width: 70vw;margin: 0 auto;" class="padt10">
                <mu-tabs inverse :value.sync="editTab">
                    <mu-tab value="main">基本信息</mu-tab>
                    <mu-tab value="product" v-if="model.id > 0">采购订单明细</mu-tab>
                  <mu-tab value="import_need" v-if="model.id > 0">从采购申请单导入</mu-tab>
                  <mu-tab value="import_inquiry" v-if="model.id > 0">从采购询价单导入</mu-tab>
                  <mu-tab value="import_inquiryFeedback" v-if="model.id > 0">从供应报价单导入</mu-tab>
                </mu-tabs>
                <div class="bcf bdso pad5" v-show="editTab === 'main'" style="width: 70vw;min-height: 60vh">
                    <EzData ref="editForm" :config="configEdit.main()" v-model="model" :key="editKey"></EzData>
                </div>
                <div class="bcf bdso pad5" v-if="editTab === 'product'" style="width: 70vw;min-height: 60vh">
                    <BuyOrderProduct  :base="{belongToId:model.id}" :params="{belongToId:model.id}" :key="productListKey"></BuyOrderProduct>
                </div>
              <div class="bcf bdso pad5" v-if="editTab === 'import_need'" style="width: 70vw;min-height: 60vh">
                <title-a>选择采购申请</title-a>
                <div class="mu-form-item flex-r">
                  <div class="flex1"><EzSearch :config="needSearchConfig" v-model="needId" key="needSearchConfig"></EzSearch></div>
                  <div v-show="needProductSelected.length > 0">
                    <mu-button flat small color="primary" @click="importNeedProduct">
                      <mu-icon value="add" right></mu-icon>
                      导入选中清单项目
                    </mu-button>
                  </div>
                </div>
                <title-a>采购清单</title-a>
                <mu-data-table checkbox select-all selectable :selects.sync="needProductSelected" stripe
                               :columns="needProductTableConfig" height="400" :data="needProduct" rowKey="id" >
                  <template slot-scope="scope">
                    <td :align="col.align" v-for="col in needProductTableConfig" :key="`${scope.row.id}${col.name}`">
                      <!--这个ID只是一个自定义的示例-->
                      <div :class="`ez-${col.align}`" v-if="col.name === 'id'">{{ scope.row.id }}</div>
                      <EzListViewer :class="`ez-${col.align}`" v-else :config="col" :row="scope.row"></EzListViewer>
                    </td>
                  </template>
                </mu-data-table>
              </div>
              <div class="bcf bdso pad5" v-if="editTab === 'import_inquiry'" style="width: 70vw;min-height: 60vh">
                <title-a>选择采购询价</title-a>
                <div class="mu-form-item flex-r">
                  <div class="flex1"><EzSearch :config="inquirySearchConfig" v-model="inquiryId" key="inquirySearchConfig"></EzSearch></div>
                  <div v-show="inquiryProductSelected.length > 0">
                    <mu-button flat small color="primary" @click="importInquiryProduct">
                      <mu-icon value="add" right></mu-icon>
                      导入选中清单项目
                    </mu-button>
                  </div>
                </div>
                <title-a>采购清单</title-a>
                <mu-data-table checkbox select-all selectable :selects.sync="inquiryProductSelected" stripe
                               :columns="inquiryProductTableConfig" height="400" :data="inquiryProduct" rowKey="id" >
                  <template slot-scope="scope">
                    <td :align="col.align" v-for="col in inquiryProductTableConfig" :key="`${scope.row.id}${col.name}`">
                      <!--这个ID只是一个自定义的示例-->
                      <div :class="`ez-${col.align}`" v-if="col.name === 'id'">{{ scope.row.id }}</div>
                      <EzListViewer :class="`ez-${col.align}`" v-else :config="col" :row="scope.row"></EzListViewer>
                    </td>
                  </template>
                </mu-data-table>
              </div>
              <div class="bcf bdso pad5" v-if="editTab === 'import_inquiryFeedback'" style="width: 70vw;min-height: 60vh">
                <title-a>选择供应报价</title-a>
                <div class="mu-form-item flex-r">
                  <div class="flex1"><EzSearch :config="inquiryFeedbackSearchConfig" v-model="inquiryFeedbackId" key="inquiryFeedbackSearchConfig"></EzSearch></div>
                  <div v-show="inquiryFeedbackProductSelected.length > 0">
                    <mu-button flat small color="primary" @click="importInquiryFeedbackProduct">
                      <mu-icon value="add" right></mu-icon>
                      导入选中清单项目
                    </mu-button>
                  </div>
                </div>
                <title-a>采购清单</title-a>
                <mu-data-table checkbox select-all selectable :selects.sync="inquiryFeedbackProductSelected" stripe
                               :columns="inquiryFeedbackProductTableConfig" height="400" :data="inquiryFeedbackProduct" rowKey="id" >
                  <template slot-scope="scope">
                    <td :align="col.align" v-for="col in inquiryFeedbackProductTableConfig" :key="`${scope.row.id}${col.name}`">
                      <!--这个ID只是一个自定义的示例-->
                      <div :class="`ez-${col.align}`" v-if="col.name === 'id'">{{ scope.row.id }}</div>
                      <EzListViewer :class="`ez-${col.align}`" v-else :config="col" :row="scope.row"></EzListViewer>
                    </td>
                  </template>
                </mu-data-table>
              </div>
            </div>
        </div>
        <div class="w100 tac padt10">
            <mu-button class="mar1" color="primary" @click="save">
                <mu-icon left value="save"></mu-icon>
                保存
            </mu-button>
            <mu-button class="mar1" color="warning" @click="cancelEdit">
                <mu-icon left value="close"></mu-icon>
                取消
            </mu-button>
        </div>
        <div class="pos-a t0 l0 pad10" v-if="!isComp">
            <mu-button color="primary" icon @click="goback(-1)">
                <mu-icon value="arrow_back"></mu-icon>
            </mu-button>
        </div>
    </div>
</template>

<script>
    import mixin_edit from "./js/mixin_edit";
    import EzData from "@/comps/EzData";
    import BuyOrderProduct from "@/pages/v1/erp/BuyOrderProduct/BuyOrderProduct.vue";
    import InquiryProduct from "@/pages/v1/erp/InquiryProduct/InquiryProduct.vue";
    import EzSearchConfig from "@/comps/form/EzSearchConfig";
    import apiNeed from "@/pages/v1/erp/Need/js/apiNeed";
    import listBuilder from "@/comps/list/listBuilder";
    import apiInquiry from "@/pages/v1/erp/Inquiry/js/apiInquiry";
    import apiNeedProduct from "@/pages/v1/erp/NeedProduct/js/apiNeedProduct";
    import apiInquiryFeedback from "@/pages/v1/erp/InquiryFeedback/js/apiInquiryFeedback";
    import apiInquiryProduct from "@/pages/v1/erp/InquiryProduct/js/apiInquiryProduct";
    import EzSearch from "@/comps/form/EzSearch.vue";
    import TitleA from "@/comps/comm/TitleA.vue";
    import EzListViewer from "@/comps/list/EzListViewer.vue";
    import apiInquiryFeedbackProduct from "@/pages/v1/erp/InquiryFeedbackProduct/js/apiInquiryFeedbackProduct";
    import apiBuyOrder from "@/pages/v1/erp/BuyOrder/js/apiBuyOrder";
    export default {
        name: "v1-erp-BuyOrder-edit",
        components: {EzListViewer, TitleA, EzSearch, InquiryProduct, BuyOrderProduct, EzData},
        mixins:[mixin_edit],
      data() {
        let needSearchConfig = EzSearchConfig()
        needSearchConfig
            .setApi(apiNeed.urlChoice)
            .setApiSearchKeys(["sn__regex", "title__regex"])

        let lb = listBuilder()
        lb.add("id","#",80)
        lb.add("product","产品",180).setListIsObjectName()
        lb.add("num","数量",80)
        lb.add("unit","单位",80).setListIsObjectName()
        lb.add("price","参考价格",80)
        lb.add("note","备注",0)
        lb.add("row","RN",80)

        let inquirySearchConfig = EzSearchConfig()
        inquirySearchConfig
            .setApi(apiInquiry.urlChoice)
            .setApiSearchKeys(["sn__regex", "title__regex"])

        let lbInquiry = listBuilder()
        lbInquiry.add("id","#",80)
        lbInquiry.add("product","产品",180).setListIsObjectName()
        lbInquiry.add("num","数量",80)
        lbInquiry.add("unit","单位",80).setListIsObjectName()
        lbInquiry.add("price","参考价格",80)
        lbInquiry.add("note","备注",0)
        lbInquiry.add("row","RN",80)

        let inquiryFeedbackSearchConfig = EzSearchConfig()
        inquiryFeedbackSearchConfig
            .setApi(apiInquiryFeedback.urlChoice)
            .setApiSearchKeys(["sn__regex", "title__regex"])

        let lbInquiryFeedback = listBuilder()
        lbInquiryFeedback.add("id","#",80)
        lbInquiryFeedback.add("product","产品",180).setListIsObjectName()
        lbInquiryFeedback.add("num","数量",80)
        lbInquiryFeedback.add("unit","单位",80).setListIsObjectName()
        lbInquiryFeedback.add("price","参考价格",80)
        lbInquiryFeedback.add("note","备注",0)
        lbInquiryFeedback.add("row","RN",80)
        return {
          productListKey:"",

          needId: 0,
          needSearchConfig,
          needProduct:[],
          needProductSelected:[],
          needProductTableConfig:lb.headers,

          inquiryId: 0,
          inquirySearchConfig,
          inquiryProduct:[],
          inquiryProductSelected:[],
          inquiryProductTableConfig:lbInquiry.headers,

          inquiryFeedbackId: 0,
          inquiryFeedbackSearchConfig,
          inquiryFeedbackProduct:[],
          inquiryFeedbackProductSelected:[],
          inquiryFeedbackProductTableConfig:lbInquiryFeedback.headers,
        }
      },
      mounted() {
      },
      methods:{
        getNeedProduct(){
          apiNeedProduct.findBy({
            _where:{belongToId:this.needId},
            _dumps:["belongTo","product","unit","tax"],
            page:1, limit:0,
          },res=>{this.needProduct = res})
        },
        importNeedProduct(){
          let selectedId =[]
          for (let index of this.needProductSelected) {
            selectedId.push(this.needProduct[index].id)
          }
          apiBuyOrder.importProduct({
            id:this.model.id,
            productIds:selectedId,
            from:"need",
          },res=>{
            this.$toast.success(res.message)
            this.productListKey = Math.random()
            this.editTab = "product"
          })
        },
        getInquiryProduct(){
          apiInquiryProduct.findBy({
            _where:{belongToId:this.inquiryId},
            _dumps:["belongTo","product","unit","tax"],
            page:1, limit:0,
          },res=>{this.inquiryProduct = res})
        },
        importInquiryProduct(){
          let selectedId =[]
          for (let index of this.inquiryProductSelected) {
            selectedId.push(this.inquiryProduct[index].id)
          }
          apiBuyOrder.importProduct({
            id:this.model.id,
            productIds:selectedId,
            from:"inquiry",
          },res=>{
            this.$toast.success(res.message)
            this.productListKey = Math.random()
            this.editTab = "product"
          })
        },
        getInquiryFeedbackProduct(){
          apiInquiryFeedbackProduct.findBy({
            _where:{belongToId:this.inquiryFeedbackId},
            _dumps:["belongTo","product","unit","tax"],
            page:1, limit:0,
          },res=>{this.inquiryFeedbackProduct = res})
        },
        importInquiryFeedbackProduct(){
          let selectedId =[]
          for (let index of this.inquiryFeedbackProductSelected) {
            selectedId.push(this.inquiryFeedbackProduct[index].id)
          }
          apiBuyOrder.importProduct({
            id:this.model.id,
            productIds:selectedId,
            from:"inquiryFeedback",
          },res=>{
            this.$toast.success(res.message)
            this.productListKey = Math.random()
            this.editTab = "product"
          })
        },
      },
      watch:{
        needId(){
          this.getNeedProduct()
        },
        inquiryId(){
          this.getInquiryProduct()
        },
        inquiryFeedbackId(){
          this.getInquiryFeedbackProduct()
        }
      }
    }
</script>

<style scoped>

</style>